<template>
  <div class="dmform dmform-right" v-loading="loading">
    <a-tabs default-active-key="1" style="margin:0 10px;" :animated="false">
      <a-tab-pane key="1" tab="字典选项">
        <div class="dmform-groups">
          <a-form-model ref="form" :model="formData" :rules="formRules"
                        :label-col="formLabelCol" :wrapper-col="formWrapperCol">
            <div class="dmform-group dmform-group-scroll" :style="{maxHeight:pageHeight-95+'px'}">
              <a-form-model-item label="所属字典">
                <a-input :value="formData.parentName" disabled />
              </a-form-model-item>
              <a-form-model-item label="字典编码">
                <a-input :value="formData.type" disabled />
              </a-form-model-item>
              <a-form-model-item prop="itemName" has-feedback label="字典项中文名"
                                 help="字典项中文名。如：男、女">
                <a-input v-model="formData.itemName" />
              </a-form-model-item>
              <a-form-model-item prop="itemValue" has-feedback label="字典项数值"
                                 help="字典项数值。如：1、2">
                <a-input v-model="formData.itemValue" />
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
        <div class="dmform-bottom">
          <a-button @click="doSubmit" type="primary" :loading="submitting">{{ saveButtonText }}</a-button>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import DataFormUtils from '@/utils/DataFormUtils'
export default {
  mixins: [DataFormUtils],
  components: {},
  data() {
    return {
      loadUrl: '/jsofted/dic/get/',
      addUrl: '/jsofted/dic/add',
      updateUrl: '/jsofted/dic/update/',
      deleteUrl: '/jsofted/dic/delete/',
      defaultValues: {
        category: 'item',
        isDeleted: 0,
      },
      formData: { // 前端表单数据
        id: '',
        parentId: '',
        parentName: '',
        name: '',
        type: '',
        itemName: '',
        itemValue: '',
        category: '',
        isDeleted: 0,
      },
      formRules: {
        itemName: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 1, max: 16, message: '长度为1-16个汉字！', trigger: 'change' },
        ],
        itemValue: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 1, max: 8, message: '长度为1-8个字母和下划线！', trigger: 'change' },
        ],
      },
    }
  },
  watch: {
    'formData.itemName': function() {
      this.formData.name = this.formData.itemName + '(' + this.formData.itemValue + ')'
    },
    'formData.itemValue': function() {
      this.formData.name = this.formData.itemName + '(' + this.formData.itemValue + ')'
    },
  },
}
</script>
